<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo..</title>
    <script src="../common/vue.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test">
    <child propC prop5 ></child>


</div>


<script type="text/javascript">

    Vue.component('child',{
        props:{
            prop1:Number,
            prop2:[String,Number],
            // 数字，有默认值
            propC: {
                type: Number,
                default: 100
            },
            prop3:{
                type:String,
                required:false
            },
            prop4:{
                type:Object,
                default:function(){
                    return {a:1}
                }
            },
            prop5:{
                validator:function(value){
                    return value>0
                }
            }
        },
        template:'<input type="text" />'
    })




    var vm = new Vue({
        el: "#div_test",
        data: {

        },
        methods: {}
    })





</script>

</body>
</html>